<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">详情</a>
</h3>
    <div id="app">
        <div id="top" style="border: 1px solid gray">
            <el-descriptions title="企业信息">
                <el-descriptions-item label="企业名">{{ company.company.companyName }}</el-descriptions-item>
                <el-descriptions-item label="固定电话">{{ company.company.fixedTel }}</el-descriptions-item>
                <el-descriptions-item label="企业地址">{{ company.company.companyProvince }}{{ company.company.companyCity}}{{ company.company.companyArea}}{{ company.company.companyAddress }}</el-descriptions-item>
                <el-descriptions-item label="企业类型">{{ company.company.companyType }}</el-descriptions-item>
                <el-descriptions-item label="成立日期">{{ company.company.creatTime }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ company.company.companyStatus }}</el-descriptions-item>
                </el-descriptions-item>
            </el-descriptions>
        </div>


        <div id="lift-down" style="width: 200px; float: left; margin-top: 20px;">
            <el-tree :data="products" :props="defaultProps"></el-tree>
        </div>


        <div id="right-down" style="float: left; margin-top: 20px;">
            <el-table style="width: 100%"
                      :data="pro"
                      ref="proTable"
                      border="border">
                <el-table-column label="id" width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pname }}</a></span>
                    </template>
                </el-table-column>
                <el-table-column label="图片" width="250">
                    <template slot-scope="scope">
                        <span st    yle="margin-left: 10px">{{ scope.row.pimg }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="250">
                    <template slot-scope="scope">
                        <span st    yle="margin-left: 10px">{{ scope.row.pnumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pprice }}</span>
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column label="品牌" width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.penterprise }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="center-down" style="width: 100px" >
            <el-button type="text"><a href="/page/supplier/supplierList.html">返回</a></el-button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                company: {},
                products: [],
                product:{},
                pro:[],
                defaultProps: {
                    children: 'products',
                    label: 'companyName'
                },
                border: true,
            }
        },
        methods:{
            loadCompany(){
                axios.get("/supplier/1")
                .then(res => {
                    this.company = res.data;
                    console.log(this.company);
                })
            },
            loadProduct(){
                axios.get("/supplier/1")
                    .then(res => {
                        this.product = res.data.company;
                        let test=new Array();
                        test.push(this.product);
                        this.products=test;
                        this.products.forEach(com=>{
                            com.products.forEach(product=>{
                                product['companyName']=product.pname;
                            })
                        })
                        console.log(this.company);
                    })
            },
            loadPro(){
                axios.get("/supplier/1")
                .then(res => {
                    this.pro = res.data.company.products;
                    console.log(this.pro);
                })
            }
        },

        mounted(){
            this.loadCompany();
            this.loadProduct();
            this.loadPro();
        }
    })
</script>
</html>